<template>
	<view class="container">
		<view class="info" v-if="hasData == 1">
			<view class="finished" v-if="status == 1">
				<image class="icon" src="../../static/images/success.png"/>
				<view class="text">恭喜您审核通过，快去接单吧!</view>
			</view>
			<template v-if="status != 1">
				<view class="status" v-if="status == 0">审核中</view>
				<view class="status" v-if="status == 1">审核成功</view>
				<view class="status" v-if="status == 2">已失效</view>
				<view class="status" v-if="status == 3">审核失败</view>
				<view class="main">
					<view class="section">
						<view class="title">姓名</view>
						<view class="text">{{name}}</view>
					</view>
					<view class="section">
						<view class="title">电话</view>
						<view class="text">{{phone}}</view>
					</view>
					<view class="section">
						<view class="title">身份证</view>
						<view class="text">{{id_card}}</view>
					</view>
				</view>
			</template>
			<view class="img_info" v-if="status != 1">
				<view class="title">身份证正反面</view>
				<view class="content">
					<image class="img" :src="id_card_front"></image>
					<image class="img" :src="id_card_back"></image>
				</view>
			</view>
			<view class="footer">
				<view class="submit" v-if="status == 2 || status == 3" @click="reSubmit()">重新提交</view>
			</view>
		</view>
		
		<view class="sub" v-if="hasData == 2">
			<view class="join_bg">
				<view class="join_title">请填写申请</view>
				<view class="content">
					<view class="sec">
						<!-- <input class="input" v-model="join_time" placeholder="请选择加入时间"/> -->
						<view class="time">
							<uni-datetime-picker placeholder="请选择加入时间" class="text" :calendarIcon="false" type="date" :clearIcon="false" v-model="join_time" :border="false" @change="change" />
						</view>
					</view>
					<view class="sec">
						<input class="input" v-model="name" placeholder="请输入姓名"/>
					</view>
					<view class="sec">
						<view class="text_place" @click="selectAddress()" v-if="address == ''">请选择安装地址</view>
						<view class="text" @click="selectAddress()" v-else>{{address}}</view>
					</view>
					<view class="sec">
						<view class="view_holder" v-if="phone.length == 0">请授权获取手机号</view>
						<view class="view" v-else>{{phone}}</view>
						<button class="send_btn" open-type="getPhoneNumber" v-if="phone.length == 0"  @getphonenumber="getphonenumber">授权获取</button>
					</view>
					<view class="sec">
						<picker class="picker" @change="bindPickerChange" :value="index" :range="cates">
							<view class="p_holder" v-if="cate == ''">请选择使用期限</view>
							<view class="p_view" v-else>{{cate}}</view>
						</picker>
					</view>
				</view><!--content end-->
			</view>
		
			<view class="footer">
				<view class="submit" @click="submit()">提交申请</view>
			</view>
		</view>
	</view>
</template>

<script>
	const app = getApp();
	import Routine from '@/libs/routine';
	import { getAuthPhone } from '@/api/public';
	import {tecer_join_detail,user_brand_request,tecer_cate_list} from '@/api/platform.js';
	export default {
		data() {
			return {
				name:'',//姓名
				phone:'',//联系电话
				operationing:false,
				status:0,
				hasData:2,
				check:false,//协议
				cates:['2年','3年','4年','5年'],
				cate:'',
				join_time:'',
				address:'',
				lon:0,
				lat:0
			}
		},
		onLoad() {
			
		},
		onUnload() {
			
		},
		methods: {
			change(data){
				console.info(data)
			},
			selectAddress(){
				let that = this;
				uni.authorize({
					scope:"scope.userLocation",
					success(res) {
						uni.chooseLocation({
							success(res) {
								console.info(res)
								that.address = res.address;
								that.lon = res.longitude;
								that.lat = res.latitude;
							}
						})
					},
					fail(err) {
						
					}
				})
			},
			// 小程序获取手机号码
			getphonenumber(e){
				uni.showLoading({ title: this.$t(`加载中`) });
				Routine.getCode()
					.then(code => {
						this.getUserPhoneNumber(e.detail.encryptedData, e.detail.iv, code);
					})
					.catch(error => {
						uni.hideLoading();
					});
			},
			// 小程序获取手机号码回调
			getUserPhoneNumber(encryptedData, iv, code) {
				console.info('回调')
				getAuthPhone({
					encryptedData: encryptedData,
					iv: iv,
					code: code,
					spread_spid: app.globalData.spid,
					spread_code: app.globalData.code,
					key:this.authKey
				})
				.then(res => {
					console.info(res)
					this.phone = res['data']['purePhoneNumber']
					uni.hideLoading();
				})
				.catch(res => {
					uni.hideLoading();
					uni.showToast({
						title:'获取失败!'
					})
				});
				
			},
			//分类选择
			bindPickerChange(e){
				this.cate = this.cates[e.detail.value];
			},
			getData(){
				
			},
			isvalidPhone(phone) {
			  let isPhone = /^1[3456789]\d{9}$/ //11位合法手机号码
			  let isMob1 = /0\d{2,3}\d{7,8}/ //不带-的座机：02985111752
			  let isMob2 = /^([0-9]{3,4}-)?[0-9]{7,8}$/ //带一个-：029-85111752
			  let isMob3 = /^\d{3,4}-\d{3,4}-\d{3,4}$/; //带三个-： 0752-250-520
			  if (isMob1.test(phone) || isMob2.test(phone) || isMob3.test(phone) || isPhone.test(phone)) {
			    return true
			  } else {
			    return false
			  }
			},
			reSubmit(){
				this.hasData = 2;
			},
			//提交
			submit(){
				if(this.join_time.length == 0){
					uni.showToast({
						icon:'none',
						title:'请选择加入时间'
					})
					return;
				}
				if(this.address.length == 0){
					uni.showToast({
						icon:'none',
						title:'请选择安装地址'
					})
					return;
				}
				if(this.name.length == 0 || this.name.length > 50){
					uni.showToast({
						icon:'none',
						title:'请输入姓名'
					})
					return;
				}
				if(this.phone.length == 0){
					uni.showToast({
						icon:'none',
						title:'请授权获取电话号码'
					})
					return;
				}
				if(this.cate.length == 0){
					uni.showToast({
						icon:'none',
						title:'请选择使用期限'
					})
					return;
				}
				let data = {
					join_time:this.join_time,
					name:this.name,
					phone:this.phone,
					address:this.address,
					use_time:this.cate,
					lat:this.lat,
					lon:this.lon
				};
				let that = this;
				uni.showModal({
				    title: '提示',
				    content: '确定提交申请？',
				    success: function (res) {
				        if (res.confirm) {
							that.operationing = true;
							uni.showLoading({
								title: '正在处理',
							})
							user_brand_request(data).then(res => {
								console.info(res.data)
								that.operationing = false;
								uni.hideLoading();
								if(res.status == 200){
									uni.showToast({
										icon:'success',
										title:res.msg
									})
									setTimeout(function(){
										uni.navigateBack();
									},1000);
								}else{
									uni.showToast({
										icon:'error',
										title:res.msg
									})
								}
							}).catch(err => {
								that.operationing = false;
								uni.hideLoading();
								return that.$util.Tips({
									title: err
								})
							});
						}
					},
				});
			}
		}
	}
</script>

<style lang="scss">
	.container{
		.info{
			display: flex;
			flex-direction: column;
			.finished{
				display: flex;
				flex-direction: column;
				padding: 50rpx 0rpx;
				align-items: center;
				.icon{
					width: 100rpx;
					height: 100rpx;
				}
				.text{
					font-size: 28rpx;
					color: black;
					margin-top: 30rpx;
				}
			}
			.status{
				padding: 50rpx 0rpx;
				text-align: center;
				color: red;
				background-color: white;
			}
			.main{
				margin-top: 10rpx;
				background-color: white;
				display: flex;
				flex-direction: column;
				padding: 0rpx 30rpx;
				.section{
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					height: 80rpx;
					align-items: center;
					border-bottom: 1rpx solid #f1f1f1;
					.title{
						font-size: 28rpx;
						color: black;
					}
					.text{
						font-size: 28rpx;
						color:black;
					}
				}
			}
			.img_info{
				display: flex;
				flex-direction: column;
				background-color: white;
				padding: 30rpx;
				.title{
					font-size: 28rpx;
					color: black;
				}
				.content{
					display: flex;
					flex-direction: row;
					.img{
						height: 200rpx;
						width: 45%;
						background-color: #f5f5f5;
						margin-left: 15rpx;
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						border-radius: 10rpx;
					}
				}
			}
			.footer{
				margin-top: 50rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				padding-bottom: 150rpx;
				.submit{
					height: 80rpx;
					width: 75%;
					background-color: #2BA5FF;
					line-height: 80rpx;
					border-radius: 40rpx;
					text-align: center;
					color: white; 
				}
			}
		}
		.sub{
			display: flex;
			flex-direction: column;
			.top_bg{
				height: 343rpx;
				background: linear-gradient(180.00deg, #2ba5ff 0%, #0077d0 100%);
				display: flex;
				flex-direction: column;
				.big_title{
					font-size: 72rpx;
					color: white;
					font-weight: bold;
					margin-top: 80rpx;
					margin-left: 50rpx;
				}
				.small_desc{
					font-size: 28rpx;
					color: white;
					font-weight: bold;
					margin-left: 70rpx;
					margin-top: 10rpx;
					.org{
						color: darkorange;
					}
				}
			}
			.join_bg{
				margin-top: 30rpx;
				margin-left: 30rpx;
				margin-right: 30rpx;
				z-index: 1000;
				background-color: white;
				// height: 1000rpx;
				border-radius: 30rpx;
				padding-bottom: 100rpx;
				.join_title{
					font-size: 32rpx;
					font-weight: bold;
					color: black;
					text-align: center;
					padding-top: 30rpx;
					margin-bottom: 80rpx;
				}
				.sec{
					display: flex;
					flex-direction: row;
					height: 80rpx;
					border-radius: 40rpx;
					border: 1rpx solid #f1f1f1;
					margin-left: 20rpx;
					margin-right: 20rpx;
					align-items: center;
					margin-top: 30rpx;
					.input{
						margin: 0rpx 20rpx;
						flex: 1;
					}
					.text{
						margin: 0rpx 20rpx;
						flex: 1;
						color: black;
					}
					.time{
						margin: 0rpx 20rpx;
						flex: 1;
						.text{
							flex: 1;
							background-color: transparent;
						}
					}
					.text_place{
						margin: 0rpx 20rpx;
						flex: 1;
						color: gray;
					}
					.send_btn{
						width: 160rpx;
						height: 60rpx;
						border-radius: 30rpx;
						background-color: #0077d0;
						color: white;
						text-align: center;
						line-height: 60rpx;
						margin-right: 20rpx;
						font-size: 28rpx;
					}
					.re_send_btn{
						background-color: lightgray;
					}
					.view_holder{
						margin: 0rpx 20rpx;
						flex: 1;
						color: gray;
					}
					.view{
						margin: 0rpx 20rpx;
						flex: 1;
						color: black;
					}
					.picker{
						flex:1;
						margin: 0rpx 20rpx;
						.p_holder{
							color: gray;
						}
						.p_view{
							color: black;
						}
					}
				}//sec end 
				.img_bg{
					display: flex;
					flex-direction: column;
					margin-top: 30rpx;
					margin-left: 20rpx;
					margin-right: 20rpx;
					.title{
						font-size: 28rpx;
						color: black;
						margin-left: 20rpx;
					}
					.content{
						display: flex;
						flex-direction: row;
						margin-top: 20rpx;
						.default{
							height: 200rpx;
							width: 45%;
							background-color: #f5f5f5;
							margin-left: 15rpx;
							display: flex;
							flex-direction: column;
							align-items: center;
							justify-content: center;
							border-radius: 10rpx;
							.make_phone{
								width:80rpx;
								height:80rpx;
							}
							.desc{
								font-size: 28rpx;
								color: darkgray;
								margin-top: 20rpx;;
							}
						}
					}
				}
				.protocol_bg{
					margin-top: 50rpx;
					display: flex;
					flex-direction: row;
					margin-left: 30rpx;
					margin-right: 30rpx;
					.radio{
						width: 40rpx;
						height:40rpx;
					}
					.text{
						margin-left: 10rpx;
						color: #000000;
						font-size: 28rpx;
					}
					.role{
						color: red;
						font-size: 28rpx;
					}
				}
			}//join_bg end
			
			
			.footer{
				margin-top: 50rpx;
				display: flex;
				flex-direction: row;
				justify-content: center;
				padding-bottom: 150rpx;
				.submit{
					height: 80rpx;
					width: 75%;
					background-color: #2BA5FF;
					line-height: 80rpx;
					border-radius: 40rpx;
					text-align: center;
					color: white; 
				}
			}
		}
	}
</style>
